<template>
    <div>
        <Button v-if="showBackBtn" class="goBack" type="primary" @click="$router.back()"><Icon type="ios-arrow-back" /> 返回  </Button>
        <Modal
                v-model="modal"
                title="确认操作"
                width="20"
                @on-ok="handleSubmit">
            <div style="text-align:center">
                <p>是否确认保存!</p>
            </div>
        </Modal>
        <Card class="line-style" v-for="(item,index) in formList" :key="item.hospital_id">
            <div class="line-wrap">
                <div class="line-title">{{item.label}}</div>
                <div class="line-main">
                    <Form :ref="'formCustom'+item.hospital_id" :model="item" :rules="ruleCustom" :label-width="100">
                        <Row>
                            <Col span="7">
                                <FormItem  label="上报时间" prop="imp_date">
                                    <DatePicker @on-change="dateChange" :value="item.imp_date" format="yyyy-MM-dd" type="date"
                                                placeholder="选择上报日期" :options="optionsDate"></DatePicker>
                                </FormItem>
                            </Col>
                            <Col span="7">
                                <Form-item label="ph值"  prop="ph">
                                    <i-input type="number" number v-model="item.ph"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="余氯"  prop="dpd">
                                    <i-input type="number" number v-model="item.dpd"><span slot="append">mg/L</span></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="污水处理量"   prop="quantity">
                                    <i-input type="number" number v-model="item.quantity"><span slot="append">吨</span></i-input>
                                </Form-item>
                            </Col>
                        </Row>
                    </Form>
                    <div class="line-button" v-if="!showDetail">
                        <Button type="primary" @click="validateForm('formCustom'+item.hospital_id,index)">保存</Button>
                    </div>
                </div>
            </div>
        </Card>
    </div>
</template>

<script>
import { insert, getDictInfoList, update, findList } from '@/api/outbreak-management/city-operation/environmental-improvement/medical-wastewater-treatment'
export default {
  data () {
    return {
      optionsDate: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now()
        }
      },
      currentIndex: '',
      // 控制保存按钮显隐
      showDetail: false,
      // 返回按钮
      showBackBtn: false,
      modal: false,
      formList: [],
      ruleCustom: {
        ph: [
          { required: true, type: 'number', message: 'ph值必填', trigger: 'blur' },
          { min: 0, max: 99999999, type: 'number', message: 'ph值范围0-99999999', trigger: 'blur' }
        ],
        dpd: [
          { required: true, type: 'number', message: '余氯必填', trigger: 'blur' },
          { min: 0, max: 99999999, type: 'number', message: '余氯范围0-99999999', trigger: 'blur' }
        ],
        quantity: [
          { required: true, type: 'number', message: '污水处理量必填', trigger: 'blur' },
          { min: 0, max: 99999999, type: 'number', message: '污水处理量范围0-99999999', trigger: 'blur' }
        ],
        imp_date: [
          { required: true, message: '上报日期必选', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    /**
             * 日期格式化
             */
    dateChange (date, index) {
      let formList = this.formList
      formList.forEach(item => {
        item.imp_date = date
      })
      // this.formList[index].imp_date = date
    },
    // 校验保存数据
    validateForm (name, index) {
      this.$refs[name][0].validate((valid) => {
        if (valid) {
          this.currentIndex = index
          this.modal = true
        } else {
          this.$Message.error('表单验证失败,请检查后再试!')
        }
      })
    },
    handleSubmit () {
      let requestData = this.formList[this.currentIndex]
      if (requestData.id) {
        update(requestData).then(({ data }) => {
          let { errcode } = data
          if (errcode === 0) {
            this.$Message.success('保存成功!')
            this.modal = false
            this.currentIndex = ''
          } else {
            this.$Message.error('保存失败!')
          }
        })
      } else {
        insert(requestData).then(({ data }) => {
          let { errcode } = data
          if (errcode === 0) {
            this.$Message.success('保存成功!')
            this.modal = false
            this.currentIndex = ''
          } else {
            this.$Message.error('保存失败!')
          }
        })
      }
    },
    getDictInfoList () {
      getDictInfoList().then(({ data }) => {
        let { data: res, errcode } = data
        if (errcode === 0 && res.length > 0) {
          let formList = []
          res.forEach(item => {
            let { value, label } = item
            let formObj = { hospital_id: value, label, epidemic_num: 0, imp_date: '' }
            formList.push(formObj)
          })
          this.formList = formList
        }
      })
    },
    isEditStatus () {
      if (this.$route.query && this.$route.query.imp_date) {
        console.log(this.$route.query.imp_date)
        if (this.$route.query.showDetail) {
          this.showDetail = true
        }
        this.showBackBtn = true
        this.editShow(this.$route.query.imp_date)
      } else {
        this.getDictInfoList()
      }
    },
    editShow (imp_date) {
      findList({ imp_date }).then(({ data }) => {
        let { errcode, data: res } = data
        console.log(res)
        if (errcode === 0) {
          res.forEach(item => {
            item.imp_date = this.$common.moment(item.imp_date).format('YYYY-MM-DD')
            item.label = item.name
            item.hospital_id = item.value
            item.ph = Number(item.ph)
            item.dpd = Number(item.dpd)
            item.quantity = Number(item.quantity)
          })
        }
        this.formList = res
      })
    }
  },
  created () {
    this.isEditStatus()
  },
  mounted () {
  }
}
</script>

<style scoped>

</style>
